Text Field#

The following modifiers customize the behavior and appearance of TextField components. These allow you to control keyboard behavior, input handling, and submission logic.

onSubmit#

Adds an action to perform when the user submits a value from the text field.

Type#

1onSubmit?: (() => void) | {
2  triggers: SubmitTriggers
3  action: () => void
4}

Behavior#

• If provided as a function:

  1<TextField onSubmit={() => console.log('Submitted')} />

  This is equivalent to:

  1<TextField
  2  onSubmit={{
  3    triggers: 'text',
  4    action: () => console.log('Submitted')
  5  }}
  6/>

• You can explicitly define what kind of submission should trigger the action using the triggers option:

  1<TextField
  2  onSubmit={{
  3    triggers: 'search',
  4    action: () => console.log('Search submitted')
  5  }}
  6/>

SubmitTriggers values:#

• "text": Triggered by text input views like TextField, SecureField, etc.
• "search": Triggered by search fields (e.g., those using the searchable modifier).

keyboardType#

Specifies the type of keyboard to display when the text field is focused.

Type#

1keyboardType?: KeyboardType

Options#

• 'default'
• 'numberPad'
• 'phonePad'
• 'namePhonePad'
• 'URL'
• 'decimalPad'
• 'asciiCapable'
• 'asciiCapableNumberPad'
• 'emailAddress'
• 'numbersAndPunctuation'
• 'twitter'
• 'webSearch'

Example#

1<TextField keyboardType="emailAddress" />

autocorrectionDisabled#

Controls whether the system autocorrection is enabled.

Type#

1autocorrectionDisabled?: boolean

Default#

• true — autocorrection is disabled by default.

Example#

1<TextField autocorrectionDisabled={false} />

textInputAutocapitalization#

Sets how the text input system should automatically capitalize text.

Type#

1textInputAutocapitalization?: TextInputAutocapitalization

Options#

• "never" – No capitalization.
• "characters" – All letters capitalized.
• "sentences" – First letter of each sentence capitalized.
• "words" – First letter of each word capitalized.

Example#

1<TextField textInputAutocapitalization="words" />

submitScope#

Prevents submission triggers from this view from propagating upward to parent views with submission handlers.

Type#

1submitScope?: boolean

Default#

• false — submission actions bubble up by default.

Example#

1<TextField submitScope />

This ensures that onSubmit handlers defined higher up in the view hierarchy won’t be called when this field is submitted.